<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="custom-form">
      <div class="con-container">
        <div class="lab-container">
          <label class="condition-item-title">字典名称</label>
          <el-form-item label="" prop="dictType" class="custom-el-form-item">
            <el-select v-model="queryParams.dictType" size="small" class="query-param">
              <el-option
                v-for="item in typeOptions"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictType"
              />
            </el-select>
          </el-form-item>
        </div>

        <div class="btn-container">
          <el-form-item>
            <el-button type="primary" icon="el-icon-setting" size="mini" @click="conditionToggle">高级查询</el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button  icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:dict:add']"
            >新增</el-button>
          </el-form-item>
        </div>
      </div>

      <div class="toggle-container" ref="toggle-container" style="display: none;">
        <div class="condition-item">
          <label class="condition-item-title">字典标签</label>
          <el-form-item label="" prop="dictLabel">
            <el-input
              class="query-param"
              v-model="queryParams.dictLabel"
              placeholder="请输入字典标签"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
        <div class="condition-item">
          <label class="condition-item-title">状态</label>
          <el-form-item label="" prop="status">
            <el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small" class="query-param">
              <el-option
                v-for="dict in statusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </div>
      </div>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">

      </el-col>
    </el-row>
    <div class="bb"  v-show="rankType==0">
      <el-table  ref="table" :height="tableHeight" v-loading="loading" :data="dataList"
                @sort-change="changeTableSort"
                @selection-change="handleSelectionChange">
        <el-table-column  type="selection" width="55" align="center" />
        <el-table-column label="序号" align="left" type="index" width="60">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="字典标签" align="left" prop="dictLabel" sortable :render-header="(h,obj) => renderHeader(h,obj)"/>
        <el-table-column label="字典键值" align="left" prop="dictValue" sortable :render-header="(h,obj) => renderHeader(h,obj)"/>
        <el-table-column label="字典排序" align="left" prop="dictSort" sortable :render-header="(h,obj) => renderHeader(h,obj)"/>
        <el-table-column label="状态" align="left" prop="status" :formatter="statusFormat" sortable :render-header="(h,obj) => renderHeader(h,obj)"/>
        <el-table-column label="备注" align="left" prop="remark" :show-overflow-tooltip="true"/>
        <el-table-column label="创建时间" align="left" prop="createTime" width="180" sortable :render-header="(h,obj) => renderHeader(h,obj)">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:dict:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:dict:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :page-sizes="pageList"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div class="aa" v-show="rankType==1">
      <el-table
        ref="table1"
        :height="tableHeight"
        v-loading="loading"
        row-key="dictCode"
        :data="dataMultiLevelList"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column label="字典标签" align="left" prop="dictLabel" sortable :render-header="(h,obj) => renderHeader(h,obj)"/>
        <el-table-column label="字典键值" align="left" prop="dictValue" sortable :render-header="(h,obj) => renderHeader(h,obj)"/>
        <el-table-column label="字典排序" align="left" prop="dictSort" sortable :render-header="(h,obj) => renderHeader(h,obj)"/>
        <el-table-column label="状态" align="left" prop="status" :formatter="statusFormat" sortable :render-header="(h,obj) => renderHeader(h,obj)"/>
        <el-table-column label="备注" align="left" prop="remark" :show-overflow-tooltip="true"/>
        <el-table-column label="创建时间" align="left" prop="createTime" width="180" sortable :render-header="(h,obj) => renderHeader(h,obj)">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left"  class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:dict:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:dict:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false">
      <el-form ref="form"  :model="form" :rules="rules" label-width="80px">
        <div v-if="rankType==1">
        <el-form-item label="上级字典">
          <treeselect
            v-model="form.parentCode"
            :options="dataMultiLevelOptions"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="上级字典"
          />
        </el-form-item>
        </div>
        <el-form-item label="字典类型">
          <el-input v-model="form.dictType" :disabled="true" />
        </el-form-item>
        <el-form-item label="数据标签" prop="dictLabel">
          <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
        </el-form-item>
        <el-form-item label="数据键值" prop="dictValue">
          <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
        </el-form-item>
        <el-form-item label="显示排序" prop="dictSort">
          <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label="回显样式" prop="listClass">
          <el-select v-model="form.listClass">
            <el-option
              v-for="item in listClassOptions"
              :key="item.value"
              :label="item.label + '(' + item.value + ')'"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listData, getData, delData, addData, updateData, exportData,listDataMultiLevel,addDataMultiLevel,delDataMultiLevel,getDataMultiLevel,updateDataMultiLevel } from "@/api/system/dict/data";
import { listType, getType } from "@/api/system/dict/type";
import $ from "jquery";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
export default {
  name: "Data",
  components: { Treeselect, IconSelect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      tableHeight: 450,
      // 字典表格数据
      dataList: [],
      pageList: [100,200,500,1000],
      // 默认字典类型
      defaultDictType: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 类型数据字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        sort: undefined,
        order: undefined,
        dictName: undefined,
        dictType: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        dictLabel: [
          { required: true, message: "数据标签不能为空", trigger: "blur" }
        ],
        dictValue: [
          { required: true, message: "数据键值不能为空", trigger: "blur" }
        ],
        dictSort: [
          { required: true, message: "数据顺序不能为空", trigger: "blur" }
        ]
      },
      columnLabel: '',
      rankType:0,
      // 字典表格数据
      dataMultiLevelList: [],
      dataMultiLevelOptions: [],
      // 数据标签回显样式
      listClassOptions: [
        {
          value: "default",
          label: "默认"
        },
        {
          value: "primary",
          label: "主要"
        },
        {
          value: "success",
          label: "成功"
        },
        {
          value: "info",
          label: "信息"
        },
        {
          value: "warning",
          label: "警告"
        },
        {
          value: "danger",
          label: "危险"
        }
      ],
    };
  },
  watch:{
    '$store.state.app.screenHeight':function(){ //监听屏幕高度变化
      if(this.$refs.table.$el.offsetTop){
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 140;
      }else{
        this.tableHeight = window.innerHeight - 62 - 140;
      }
    }
  },
  created() {
    const dictId = this.$route.params && this.$route.params.dictId;
    this.getType(dictId);
    this.getTypeList();
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
  },
  methods: {
    /** 查询字典类型详细 */
    getType(dictId) {
      getType(dictId).then(response => {
        this.rankType=response.data.rankType;
        this.queryParams.dictType = response.data.dictType;
        this.defaultDictType = response.data.dictType;
        if (this.rankType==0) {
          this.getList();
        }else if (this.rankType==1){
          this.getDataMultiLevelList();
        }
      });
    },
    /** 查询字典类型列表 */
    getTypeList() {
      listType().then(response => {
        this.typeOptions = response.rows;
      });
    },
    /** 查询字典数据列表 */
    getList() {
      this.loading = true;
      listData(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    conditionToggle() {
      if ($('.toggle-container').css('display') == 'none') {
        $('.toggle-container').css('display', 'inline-block');
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 140;
      } else {
        $('.toggle-container').css('display', 'none');
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 140;
      }
    },
    renderHeader(h, { column, $index }, width){
      let color = '#515a6e';
      let that = this;
      if(that.columnLabel != '' && that.columnLabel == column.label){
        color = "#ff6600";
      }
      let style = {};
      if(width){
        // width: 'calc(' + width + '% - 48px)'
        style = {textAlign:'left',wordBreak: 'break-all',whiteSpace: 'pre-line',display:'inline-block',lineHeight: 'normal',color: color, width: width+"px"}
      }else{
        style = {textAlign:'left',wordBreak: 'break-all',whiteSpace: 'pre-line',display:'inline-block',lineHeight: 'normal',color: color}
      }

      return h(
        'span',
        {
          style: style,
        },
        column.label)
    },
    //表格排序
    changeTableSort(column){
      let order = '';
      if(column.order === 'ascending'){
        order = 'asc';
      }else if(column.order === 'descending'){
        order = 'desc';
      }
      if(order !== ''){
        this.queryParams.sort = column.prop.replace(/([A-Z])/g,"_$1").toLowerCase();
        this.queryParams.order = order;
        this.queryParams.pageNum = 1;
        this.columnLabel = column.column.label;
      }else{
        this.queryParams.sort = '';
        this.queryParams.order = '';
        this.queryParams.pageNum = 1;
        this.columnLabel = '';
      }
      this.getList();
    },
    // 数据状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        parentCode: undefined,
        dictCode: undefined,
        dictLabel: undefined,
        dictValue: undefined,
        dictSort: 0,
        status: "0",
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      for (let type of this.typeOptions){
        if (type.dictType == this.queryParams.dictType){
          this.rankType=type.rankType;
          break;
        }
      }
      if (this.rankType==0) {
        this.queryParams.pageNum = 1;
        this.getList();
      }else if (this.rankType==1){
        this.getDataMultiLevelList();
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.dictType = this.defaultDictType;
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getTreeselect();
      this.open = true;
      this.title = "新增字典数据";
      this.form.dictType = this.queryParams.dictType;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictCode)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.getTreeselect();
      const dictCode = row.dictCode || this.ids
      if (this.rankType==0) {
        getData(dictCode).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改字典数据";
        });
      }else {
        getDataMultiLevel(dictCode).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改字典数据";
        });
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.dictCode != undefined) {
            if (this.rankType==0) {
              updateData(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }else {
              updateDataMultiLevel(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getDataMultiLevelList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          } else {
            if (this.rankType==0) {
              addData(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }else {
              addDataMultiLevel(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getDataMultiLevelList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const dictCodes = row.dictCode || this.ids;
      if (this.rankType==0) {
        this.$confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          confirmButtonClass: "btn-confirm",
          type: "warning"
        }).then(function() {
          return delData(dictCodes);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {
        });
      }else {
        this.$confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          confirmButtonClass: "btn-confirm",
          type: "warning"
        }).then(function() {
          return delDataMultiLevel(dictCodes);
        }).then(() => {
          this.getDataMultiLevelList();
          this.msgSuccess("删除成功");
        }).catch(function() {
        });
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportData(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
    },
    /** 查询字典数据列表 */
    getDataMultiLevelList() {
      this.loading = true;
      listDataMultiLevel(this.queryParams).then(response => {
        this.dataMultiLevelList= this.handleTree(response.rows, "dictCode","parentCode");
        this.loading = false;
      });
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      listDataMultiLevel().then(response => {
        this.dataMultiLevelOptions = [];
        const ataMultiLevel = { dictCode: 0, dictLabel: '主类目', children: [] };
        ataMultiLevel.children = this.handleTree(response.rows, "dictCode", "parentCode");
        this.dataMultiLevelOptions.push(ataMultiLevel);
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.dictCode,
        label: node.dictLabel,
        children: node.children
      };
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 140;
    });
  }
};
</script>
